<template>
  <div class="box">
    <el-dialog
      width="60%"
      destroy-on-close
      :before-close="close"
      title="信用额度变更"
      v-model="dialogVisible"
    >
      <section>
        <!-- 额度信息 -->
        <aside class="mode">
          <div class="mode_head flex">
            <span class="title">额度信息</span>
            <div class="flex" @click="handleEncryption()">
              <vab-icon icon="eye-close-line" v-if="isEncryption" />
              <vab-icon icon="eye-line" v-else />
            </div>
          </div>
          <el-row :gutter="24">
            <el-col v-for="(item, i) in quotaProps" v-bind="colLyout" :key="i">
              <div class="detail-mode">
                <span class="label">{{ item.label }}</span>
                <span class="text">
                  {{ isEncryption ? '****' : (_FieldFormat(baseData[item.prop], item.type) || '--') }}
                </span>
              </div>
            </el-col>
          </el-row>

          <el-form ref="ruleFormRef" :model="ruleForm"  label-width="130px">
            <el-row :gutter="24">
              <el-col v-bind="baseColLyout8">
                <el-form-item label="额度变更" prop="change_amount" required :rules="[
                  { required: true, message: '额度变更不能为空！', trigger: 'blur' },
                ]">
                  <VabNumberForm class="width_100" v-model="ruleForm.change_amount" :min="-(baseData.credit_amount - 1)"/>
                </el-form-item>
              </el-col>
              <el-col v-bind="baseColLyout8">
                <el-form-item label="变更后信用额度" >
                  <span class="text">
                    {{ _FieldFormat(changeNumber, 'money') }}
                  </span>
                </el-form-item>
               
              </el-col>
            </el-row>
          </el-form>
        </aside>
        <!-- 基本信息 -->
        <aside class="mode">
          <span class="title mode_head">基本信息</span>
          <el-row :gutter="24">
            <el-col v-for="(item, i) in baseProps" v-bind="baseColLyout" :key="i">
              <div class="detail-mode">
                <span class="label">{{ item.label }}</span>
                <span class="text" :class="{ 'remark': item.label == '备注' }">
                  {{ returnBaseForm(baseData[item.prop], item.prop) }}
                </span>
              </div>
            </el-col>
          </el-row>
        </aside>
      </section>
      <footer class="flex_just_center">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="submit(ruleFormRef)">提交</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { ref } from 'vue'
import { crediChangeAmount, crediCustomerInfo, crediTempAmount } from '~/src/api/dms/credit';
import { DateFormat, FieldFormat } from '~/src/utils/utils';

const _id = ref('')
const proxy: any = getCurrentInstance()?.proxy


const dialogVisible = ref(false)
// 加密
const isEncryption = ref(true)

const colLyout = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 8,
}
const baseColLyout = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 12,
}
const baseColLyout8 = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 8,
}

const baseData = ref<any>({
  note: '',
})

const baseProps = [
  { label: '客户', prop: 'customer_name', type: '', width: '240' },
  { label: '授信组织', prop: 'org_name', type: 'custom' },
  { label: '币别', prop: 'currency_name', type: 'custom' },
  { label: '信用状态', prop: 'status', type: '', width: '100' },
  { label: '备注', prop: 'note', type: '', width: '160' },
]
const quotaProps = ref<any>([
  { label: '固定信用额度', prop: 'credit_amount', type: 'money', width: '240', disable: true },
  { label: '已使用额度', prop: 'use_credit_amount', type: 'money', disable: true },
  { label: '额度余额', prop: 'residue_credit_amount', type: 'money', width: '100', disable: true },
])

const ruleForm = ref<any>({
  change_amount: '',
})
const ruleFormRef = ref()

/**
 * @method
 */

const emit = defineEmits(['refresh'])

const handleEncryption = () => {
  isEncryption.value = !isEncryption.value
}

const returnBaseForm = (value: any, prop = '') => {
  const _value = `${value}`

  if (!_value || _value == 'null' || _value == 'undefined') return '--'
  // 信用状态
  if (prop == 'status') return value == 1 ? '正常检查' : (value == 2 ? '信用冻结' : '信用免检')
  return value
}

const _FieldFormat = (value = '', type = '') => {
  return FieldFormat(value, type, 2)
}
// 开
const open = async (id = '') => {
  dialogVisible.value = true
  isEncryption.value = true
  ruleForm.value.change_amount = ''
  _id.value = id

  try {
    let res = await crediCustomerInfo({ id })
    ruleForm.value.change_amount = ''
    baseData.value = res.data
  } catch (error) {

  }
}
// 关
const close = () => {
  dialogVisible.value = false
}
// 提交
const submit = async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  await formEl.validate((valid, fields) => {

    if (!valid) return

    const { change_amount } = ruleForm.value

    let data = {
      id: _id.value,
      change_amount,
    }
    crediChangeAmount({ ...data }).then(res => {
      proxy.$Message('信用额度变更成功！', 'success')
      close()
      emit('refresh')
    }).catch(err => {

    })

  })
}

// 变更后的值
const changeNumber = computed(() => {
  return ruleForm.value.change_amount + Number(baseData.value.credit_amount)
})

defineExpose({
  open,
  close,
})
</script>
<style scoped lang="scss">
.box {
  :deep() {
    .el-dialog__header {
      padding: 16px;
    }

    .el-dialog__body {
      padding: 16px;
      padding-top: 0px;
    }
  }
}

.mode {
  background-color: #fffaf4;
  padding-top: 12px;
  padding-left: 12px;
  margin-bottom: 22px;
  border-radius: 4px;

  .mode_head {
    margin-bottom: 12px;
  }

  .padding_18 {
    padding-bottom: 18px;
  }

  .title {
    font-size: 15px;
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 12px;
    margin-right: 12px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -12px;
      width: 4px;
      height: 18px;
      background-color: #f59a23;
    }
  }
}

footer {
  padding: 12px 0;
}
</style>
